<template>
  <div>
    <br>
    <el-form :inline="true">
      <el-form-item label="单据编号">
        <el-input v-model="searchMap.orderNumber"></el-input>
      </el-form-item>
      <el-form-item label="商品信息">
        <el-input v-model="searchMap.productName"></el-input>
      </el-form-item>
      <el-form-item label="单据日期">
        <div class="block">
          <el-date-picker
            v-model="searchMap.time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-button type="primary" @click="searchData()">查询</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit('')">新增</el-button>
      </el-col>
      <!--      <el-col :span="1">-->
      <!--        <el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button>-->
      <!--      </el-col>-->
    </el-row>
    <el-table
      :data="list"
      border
      style="padding-left: 1px;" size="small">
      <el-table-column
        fixed
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button @click="handleEdit(scope.row.id)" type="text" icon="el-icon-edit" size="small" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button @click="handleDelete(scope.row.id)" type="text" icon="el-icon-delete" size="small"></el-button>
          </el-tooltip>
          <!--          <el-button type="text" size="small" @click="handleUpdateStatus(scope.row.id)">审核</el-button>-->
        </template>
      </el-table-column>
      <el-table-column
        prop="organName"
        label="客户名"
        width="120">
      </el-table-column>	      <!-- fixed="left" -->
      <el-table-column
        prop="orderNumber"
        label="单据编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="商品信息"
        width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="单价"
        width="120">
      </el-table-column>
      <el-table-column
        prop="number"
        label="数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="amount"
        label="金额合计"
        width="100">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="操作员"
        width="120">
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="80px">
        <el-form-item label="客户信息">
          <!--          <el-input v-model="pojo.productName"></el-input>-->
          <el-select v-model="pojo.organId" placeholder="请选择" @change="setOrganName()">
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.supplier"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品信息">
          <!--          <el-input v-model="pojo.productName"></el-input>-->
          <el-select v-model="pojo.productId" placeholder="请选择" @change="setProductName()">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="pojo.number" @input="calculate()"></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="pojo.price" disabled=true></el-input>
        </el-form-item>
        <el-form-item label="金额合计">
          <el-input v-model="pojo.amount" disabled=true></el-input>
        </el-form-item>
        <el-form-item label="操作员">
          <el-input v-model="pojo.userName"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="pojo.remark">
          </el-input>
        </el-form-item>
<!--        <el-form-item label="是否设为默认账户">-->
<!--          <el-switch-->
<!--            v-model="pojo.state"-->
<!--            active-value="true"-->
<!--            inactive-value="false">-->
<!--          </el-switch>-->
<!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
	      <el-button @click="dialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="handleSave()">确 定</el-button>
	    </span>
    </el-dialog>

  </div>
</template>

<script>
  import retailApi from '@/api/retail'
  import supplierApi from '@/api/supplier'
  import productApi from '@/api/product'
  import table from '../../../mock/table'
  export default{
    name: 'sale_order',
    data(){
      return{
        type:"销售退货",
        list:[],
        total:0,			//总记录数
        currentPage:1,		//当前页
        pageSize:10,		//每页大小
        searchMap:{ 'type':'销售退货'},		//查询条件
        addMap:{}, //新增条件
        dialogVisible: false,//对话框是否可见
        pojo:{},//表单绑定的属性
        id:'',
        options: [],
        supplierList:[]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      addRetail(){
        this.dialogVisible=true

      },
      fetchData(){
        retailApi.findAll(this.type,this.currentPage,this.pageSize).then(response=>{
          this.list=response.data.rows
          this.total=response.data.total
        })
      },
      searchData(){
        retailApi.search(this.searchMap,this.currentPage,this.pageSize).then(response=>{
          this.list=response.data.rows
          this.total=response.data.total
        })
      },
      handleSave(){
        retailApi.update(this.id,this.pojo).then(response=>{
          this.$message({
            message:response.message,
            type:'success'
          });
          if(response.flag){
            this.fetchData()
          }
        })
        this.dialogVisible=false
      },
      handleEdit(id){
        this.dialogVisible=true
        this.id=id
        productApi.findProduct().then(resp=> {
          this.options = resp.data
        })
        supplierApi.findAllByType('客户').then(resp=> {
          this.supplierList = resp.data
        })

        if(id!=''){
          retailApi.findById(id).then(response=>{
            if(response.flag)
              this.pojo=response.data
          })
        }else{
          this.pojo={'type':'销售退货'}
        }
      },
      reset(){
        this.searchMap={'type':'销售退货'};
      },
      handleDelete(id){
        this.$confirm('确定要删除此纪录吗？','提示',{
          confirmButtonText:'确定',
          cancelButtonTexxt:'取消',
          type:'warning'
        }).then(()=>{
          retailApi.deleteById(id).then(response=>{
            this.$message({
              message:response.message,
              type:'success'
            });
            this.fetchData()
          })
        })

      },
      // handleUpdateStatus(id) {
      //    retailApi.updateStatus(id).then(response => {
      //      this.$message({
      //       message: response.message,
      //        type: '审核成功：已审核'
      //      })
      //      if (response.flag) {
      //        this.fetchData()
      //      }
      //   })
      // },
      setProductName(){
        for(let i=0;i<this.options.length;i++){
          if(this.options[i].id===this.pojo.productId){
            this.pojo.productName=this.options[i].name
            this.pojo.price=this.options[i].sellingPrice
          }
        }
      },
      setOrganName(){
        for(let i=0;i<this.supplierList.length;i++){
          if(this.supplierList[i].id===this.pojo.organId){
            this.pojo.organName=this.supplierList[i].supplier
          }
        }
      },
      calculate(){
        this.pojo.amount=this.pojo.number*this.pojo.price
      }

    }
  }
</script>

<style scoped>

</style>
